<template>
  <div class="uploadfile">
    <el-upload
            :data="dataObj"
            :multiple="multiple"
            :headers="headers"
            :limit="limit"
            :show-file-list="false"
            :on-success="handleImageSuccess"
            :on-remove="handleRemove"
            :http-request="handleUploadRequest"
            :action="action"
            :accept="accept"
    >
      <el-button type="primary" size="medium">点击上传</el-button>
    </el-upload>

    <div :list="fileList" style="width: 1000px"@change="getNewVal">
      <div v-for="(item, index) in fileList" :key="index" class="picwrap">
        <div :span="6" class="picitem">
          <!-- <div class="cover"></div> -->
          <div
                  class="pic"
                  :style="{background: 'url(' + item.url + ') center / cover no-repeat'}"
          />
          <div class="in">
            <input v-model="item.name">
          </div>
          <div class="btns">
            <span class="arrow" />
            <ul>
              <!-- <li class="set" @click="setCover(item.uid)">设为封面</li> -->
              <li class="del" @click="customRemove(item.uid)">删除</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import chunk from './chunk'
    import { getToken } from '@/utils/auth'

    export default {
        name: 'SingleImagesUpload',
        components: {

        },
        props: {
            value: {
                type: String,
                default: ''
            },
            accept: {
                type: String,
                default: '*'
            },
            limit: {
                type: Number,
                default: 0
            },
            multiple: {
                type: Boolean,
                default: false
            },
            imagelist: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },

        data() {
            const createImagelist = []
            if (this.imagelist) {
                console.log(this.imagelist)
                this.imagelist.map(item => {
                    createImagelist.push({
                        url: item.url,
                        uid: item.id,
                        response: {
                            data: {
                                id: item.id,
                                path: item.url
                            }
                        }
                    })
                })
            }

            return {
                existImgList: createImagelist,
                action: process.env.BASE_API + '/upload/chunk',
                dataObj: {},
                percentage: 0,
                headers: {
                    'X-Token': getToken()
                },
                fileList: createImagelist,
                tmp: ''
            }
        },
        watch: {
            immediate: true,
            imagelist: {
                handler(news, old) {
                },
                // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
                immediate: true,
                deep: true
            },
            fileList_bak: function(newfileList, oldFileList) {
                const ids = []
                if (newfileList.length > 0) {
                    for (const item of newfileList) {
                        if (item.response) {
                            ids.push(item.response.data.id)
                        } else if (item.id) {
                            ids.push(item.id)
                        }
                    }
                }
                this.emitInput(ids.toString())
            },
            imagelist: function(newFileList, oldFileList) {
                // this.fileList = newFileList
                var list = []
                newFileList.map(item => {
                    list.push({
                        url: item.url,
                        uid: item.id,
                        response: {
                            data: {
                                id: item.id,
                                path: item.url
                            }
                        }
                    })
                })
                this.fileList = list
            }
        },

        mounted() {

        },
        methods: {
            /**
             * 废弃watch,启用此方法获取ids
             */

            getNewVal() {
                const ids = []
                if (this.fileList.length > 0) {
                    for (const item of this.fileList) {
                        if (item.response) {
                            ids.push(item.response.data.id)
                        } else if (item.id) {
                            ids.push(item.id)
                        }
                    }
                }

                this.emitInput(ids.toString())
            },

            handleUploadRequest(options) {
                chunk(options)
            },
            emitInput(val) {
                this.$emit('input', val)
            },
            handleImageSuccess(response, file, fileList) {
                if (this.limit != 0) {
                    if (this.fileList.length < this.limit) {
                        console.log(file, '11111')
                        this.fileList.push({
                            name: file.name,
                            percentage: file.percentage,
                            raw: file.raw,
                            response: file.response,
                            size: file.size,
                            title: file.title,
                            type_id: file.type_id,
                            url: file.response.data.path,
                            uid: file.response.data.id
                        })

                        this.getNewVal()
                    } else if (this.fileList.length == this.limit) {
                        const h = this.$createElement
                        this.$notify({
                            title: '上传图片',
                            message: h('i', { style: 'color: teal' }, '数量已达上限')
                        })
                    }
                } else {
                    this.fileList.push({
                        name: file.name,
                        percentage: file.percentage,
                        raw: file.raw,
                        response: file.response,
                        size: file.size,
                        title: file.title,
                        type_id: file.type_id,
                        url: file.response.data.path,
                        uid: file.response.data.id
                    })
                    this.getNewVal()
                }

                //  fileList.unshift(...this.existImgList);

                // this.fileList = fileList
            },
            handleUploadProgress(event, file, fileList) {},
            beforeUpload() {},
            //  删除操作
            handleRemove(file, fileList) {
                this.fileList = fileList
                this.getNewVal()
            },

            /**
             * 删除指定的项目
             */
            customRemove(uid) {
                this.fileList.splice(
                    this.fileList.findIndex(item => item.uid === uid),
                    1
                )
                this.getNewVal()
            },

            handExceed(files, fileList) {
                this.fileList = fileList

                const h = this.$createElement
                this.$notify({
                    title: '上传图片',
                    message: h('i', { style: 'color: teal' }, '数量已达上限')
                })
            }
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .image {
    width: 100%;
    height: 100%;
    display: block;
  }

  .picwrap {
    display: inline-block;
    cursor: move;
  }

  .picitem {
    border: 1px solid #eee;
    display: inline-block;
    position: relative;
    padding: 6px;
    margin: 5px 5px 0 0;
  }
  .cover {
    z-index: 9;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    left: 0;
    background: url();
  }

  .pic {
    width: 160px;
    height: 120px;

    position: relative;
  }
  .in {
    line-height: 20px;
    input {
      padding: 3px;
      border: 1px solid transparent;
      line-height: 1;
      width: 160px;
    }
  }

  .btns {
    position: absolute;
    right: 11px;
    top: 11px;

    &:hover {
      .arrow {
        border-bottom-color: transparent;
        & + ul {
          display: block;
        }
      }
    }

    ul {
      background-color: #f0f0f0;
      display: none;
    }
    ul,
    li {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    ul {
      padding: 5px 0;
      padding-left: 15px;
      position: absolute;
      right: 0;
      top: 18px;
      width: 120px;
      border: 1px solid #c9c9c9;
      // display: none;
    }
    li {
      padding-left: 25px;
      color: #333;
      cursor: pointer;
      font-size: 12px;
      line-height: 34px;
    }

    .arrow {
      display: block;
      width: 20px;
      height: 20px;
      cursor: pointer;
      border: 1px solid #c9c9c9;
      background: #fafafa
      url()
      center no-repeat;
    }

    li.del {
      background: url()
      5px no-repeat;
    }
    li.set {
      background: url()
      5px no-repeat;
    }
  }
</style>
